<template>
  <div class="content">
    <div style="height: 12px;background-color: #fff;"></div>
      <div class="listHead">
        <div class="headName">{{item.cinemaName}}<van-icon name="arrow" color="#AFAFAF"/></div>
        <div class="status">{{order.orderStatusText}}</div>
      </div>
      <div class="listContent">
        <img class="contentImg" :src="film.cover" alt="" />
        <div class="contentText">
          <div class="text1">{{film.filmName}}</div>
          <div class="text2">电影评分 <span style="color: #FF6060;">{{film.score/100==0?'暂无评分':film.score/100}}</span></div>
          <div class="text3">导演:{{film.director}}</div>
          <div class="text3">主演:{{film.cast}}</div>
          <div class="text3">类型:{{film.type}}</div>
        </div>
        <div class="button"></div>
      </div>
      <div class="listBottm">
        <div class="price">总价:{{order.actualPrice}}元</div>
        <div class="price">{{order.addTime}}</div>
      </div>
      <div v-show="ewm" style="display: flex;align-items: center;padding: 50px 125px 10px;">
        <div class="ewmCode">
          <div id="qrCode" ref="qrCodeDiv"></div>
        </div>
      </div>
      <div v-show="ewm" style="color: #757171;margin: 5px auto 0;text-align: center;">开始时间:{{hyOrder.stime}}</div>
      <div v-show="ewm" style="color: #757171;margin: 5px auto 0;text-align: center;">结束时间:{{hyOrder.etime}}</div>
      <div class="tipText" v-if="order.orderStatusText=='已完成'&&ewm==''">出票中......</div>

    </div>
  </div>
</template>

<script>
import {Tabbar, TabbarItem,Dialog} from 'vant';
import {orderInfo} from '@/api/home.js'
import QRCode from 'qrcodejs2';
export default {
  name: "orderDetail",
  data() {
    return {
      active: 0,
      list:[],
      timer:null,
      timenumber:0,
      timeList:[],
      timeshowList:[],
      id:'',
      item:{},
      film:{},
      order:{},
      hyOrder:{},
      ewm:''
    };
  },
  computed:{
  },
  mounted() {
    console.log(this.$route.query.id)
    this.id = this.$route.query.id
    this.orderInfo()
  },
  methods: {
    orderInfo(){
      let data = {
        orderId:this.id
      }
      orderInfo(data).then(res=>{
        console.log(res)
        this.item = res.cinema
        this.film = res.film
        this.order = res.order
        this.hyOrder = res.hyOrder
        // let ewm = this.hyOrder.ticketinfo
        if(this.hyOrder.ticketinfo){
          let ewm = JSON.parse(this.hyOrder.ticketinfo).map(item => item.value).join('|');
          this.ewm = ewm
          new QRCode(this.$refs.qrCodeDiv, {
              text: ewm, // 需要转换为二维码的内容
              width: 120, //宽度
              height: 120, //高度
              colorDark: '#000000', //二维码方块颜色
              colorLight: '#ffffff', //背景颜色
              correctLevel: QRCode.CorrectLevel.Q, //容错率：L M Q H 依次递减
          });
        }

      })
    },
    //提示信息
    tipsMessage(text) {
      Dialog.alert({
        message: text,
      }).then(() => {
      });
    },
  },
  watch: {},
};
</script>

<style scoped lang="scss">
  .content{
    width: 100vw;
    min-height: 100vh;
    background-color: #fff;
    overflow: hidden;
    box-sizing: border-box;
    padding-bottom: 100px;
    .listHead{
        width: 100%;
        height: 42px;
        box-sizing: border-box;
        border-bottom: 1px solid #EBEBEB;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        .headName{
          width: 200px;
          font-weight: 400;
          font-size: 14px;
          color: #AFAFAF;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .time{
          font-weight: 400;
          font-size: 13px;
          color: #FD564D;
        }
        .status{
          font-weight: 400;
          font-size: 13px;
          color: #AFAFAF;
        }
      }
      .listContent{
        width: 100%;
        height: 129px;
        box-sizing: border-box;
        padding: 0 27px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #EBEBEB;
        .contentImg{
          display: block;
          width: 74px;
          height: 97px;
        }
        .contentText{
          margin-left: 9px;
          width: 168px;
          overflow: hidden;
          .text1{
            font-weight: 500;
            font-size: 15px;
            color: #333333;
            margin-top: 7px;
            width: 168px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .text2{
            font-weight: 500;
            font-size: 12px;
            color: #333333;
            margin-top: 7px;
            width: 168px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .text3{
            font-weight: 400;
            font-size: 12px;
            color: #757171;
            margin-top: 5px;
            width: 168px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
      .button{
        width: 50px;
        height: 23px;
        // background-color: #FD564D;
        text-align: center;
        line-height: 24px;
        font-weight: 400;
        font-size: 13px;
        color: #FFFFFF;
        border-radius: 10px;
      }
      .button2{
        width: 50px;
        height: 23px;
        background-color: #FD564D00;
        text-align: center;
        line-height: 24px;
        font-weight: 400;
        font-size: 13px;
        color: #FFFFFF;
        border-radius: 10px;
      }
    }
    .listBottm{
      width: 100%;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 25px;
      box-sizing: border-box;
      .price{
        font-weight: 400;
        font-size: 14px;
        color: #AFAFAF;
      }
      .Bottmbutton{
        width: 76px;
        height: 23px;
        border-radius: 12px 12px 12px 12px;
        border: 1px solid #AFAFAF;
        text-align: center;
        line-height: 23px;
        box-sizing: border-box;
        font-weight: 400;
        font-size: 13px;
        color: #AFAFAF;
      }
      .ewmCode{
        width: 120px;
        height: 120px;
      }

  }
  .tipText{
    margin-top: 50px;
    font-size: 26px;
   text-align: center;
        color: #AFAFAF;
  }
</style>
